<template>
  <div id="app">

    
    <!-- 饮食打卡标题 -->
    <div class="title-bar">
      <div class="back-arrow">
        <svg 
        t="1747792003449" 
        class="icon" 
        viewBox="0 0 1024 1024" 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        width="25.5" 
        height="25.5"
        @click="goBack"
      >
        <path d="M658.24 210.304H292.544V64L0 283.456l292.544 219.456V356.544H658.24c124.352 0 219.52 95.04 219.52 219.456s-95.104 219.456-219.52 219.456H292.544V941.76H658.24C855.744 941.76 1024 780.8 1024 576S863.104 210.304 658.24 210.304z" 
        fill="#2c2c2c"
      ></path>
      </svg>
      </div>
      <h2>饮食记录</h2>
    </div>
    <!-- 搜索栏 -->
    <div class="search-bar">
      <input type="text" placeholder="搜索" />
    </div>
    
    <!-- 主体内容 -->
    <div class="content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div 
          class="sidebar-item"
          v-for="category in categories"
          :key="category.id"
          :class="{ active: activeCategory === category.id }"
          @click="activeCategory = category.id"
        >
          {{ category.name }}
        </div>
      </div>
      
      <!-- 食物列表 -->
      <div class="food-list">
        <div
          class="food-item"
          v-for="food in filteredFoods"
          :key="food.id"
        >
          <div class="food-image"></div>
          <div class="food-info">
            <div class="food-name">{{ food.name }}</div>
            <div class="food-rating">
              <span v-for="i in 5" :key="i">
                <span v-if="i <= food.rating">★</span>
                <span v-else>☆</span>
              </span>
            </div>
            <div class="food-calories">{{ food.calories }}千卡/100g</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'FoodList',
  setup() {
    const activeCategory = ref(1);
    
    const categories = ref([
      { id: 1, name: '蔬菜' },
      { id: 2, name: '水果' },
      { id: 3, name: '肉类' },
      { id: 4, name: '谷薯' },
      { id: 5, name: '豆类' },
      { id: 6, name: '饮品' },
      { id: 7, name: '蛋类' }
    ]);
    
    const foods = ref([
      {
        id: 1,
        name: '青椒土豆丝',
        rating: 4,
        calories: 79,
        category: 1
      },
      {
        id: 2,
        name: '凉拌黄瓜',
        rating: 5,
        calories: 42,
        category: 1
      },
      {
        id: 3,
        name: '炒西蓝花',
        rating: 3,
        calories: 71,
        category: 1
      },
      {
        id: 4,
        name: '西红柿',
        rating: 3,
        calories: 19,
        category: 1
      },
      {
        id: 5,
        name: '生菜',
        rating: 2,
        calories: 16,
        category: 1
      }
    ]);
    
    const filteredFoods = computed(() => {
      return foods.value.filter(food => food.category === activeCategory.value);
    });
    const goBack = () => {
      // 使用 uni.navigateBack 方法返回上一页
      uni.navigateBack();
    };
    return {
      activeCategory,
      categories,
      filteredFoods,
      goBack
    };
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

/* 顶部状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.time {
  font-size: 16px;
  font-weight: bold;
}

.status-indicators {
  display: flex;
  gap: 15px;
}

/* 标题栏样式 */
.title-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.back-arrow {
  margin-right: 10px;
}

.title-bar h2 {
  font-size: 18px;
  font-weight: bold;
}

/* 搜索框样式 */
.search-bar {
  padding: 10px 20px;
}

.search-bar input {
  /* width: 100%; */
  padding: 8px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background-color: #f5f5f5;
}

/* 主体内容样式 */
.content {
  display: flex;
  height: calc(100vh - 200px);
}

/* 侧边栏样式 */
.sidebar {
  width: 100px;
  background-color: #f5f5f5;
  padding: 20px 0;
  overflow-y: auto;
}

.sidebar-item {
  padding: 12px 20px;
  text-align: left;
  cursor: pointer;
}

.sidebar-item.active {
  background-color: #ffffff;
  border-left: 3px solid #4169e1;
  color: #4169e1;
  font-weight: bold;
}

/* 食物列表样式 */
.food-list {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.food-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
}

.food-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.food-info {
  text-align: left;
  flex: 1;
}

.food-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.food-rating {
  color: #ffa500;
  margin-bottom: 5px;
}

.food-calories {
  color: #666;
  font-size: 14px;
}
</style>